<template>
  <div class="goods-list-container" :style="defaultStyle" :class="isActiveClass">
    <div class="goods-wrapper" :class="layoutClass" :style="contentStyle">
      <div class="goods-item" v-for="(item, index) in contentData.default_sub_list" :key="item.id">
        <div class="goods-image">
          <img :src="item.image" class="thumb" />
        </div>

        <div class="goods-content" v-if="contentData.data_type !== 'coach'">
          <div class="title" :style="titleStyle" v-if="contentData.show_item_name !== 0">{{
            item.name
          }}</div>
          <div class="desc" :style="descStyle" v-if="contentData.show_item_desc !== 0">{{
            item.remark
          }}</div>

          <div class="price" :style="priceStyle"
            v-if="contentData.data_type === 'package' || contentData.data_type === 'card'">
            <span v-if="item.price"><span class="unit">￥</span>{{ item.price }}</span>
            <!-- <i class="iconfont-sys" style="font-size: 20px">&#xe717;</i> -->
          </div>
        </div>

        <div class="goods-content" v-if="contentData.data_type === 'coach'">
          <div>
            <div class="title mgB-10" v-if="contentData.show_item_name !== 0" :style="titleStyle">
              {{ item.name }}
            </div>
            <div class="flex-between mgB-10">
              <div class="flex align-center">
                <div class="flex-center sex-man" v-if="item.gender === 0">
                  <img class="icon" src="@/assets/img/coach-man.png" />
                  <span>男</span>
                </div>

                <div class="flex-center sex-woman" v-if="item.gender === 1">
                  <img class="icon" src="@/assets/img/coach-woman.png" />
                  <span>女</span>
                </div>
              </div>

              <div class="flex align-center coach-phone">
                <i class="iconfont-sys">&#xe776;</i>
                <span>电话咨询</span>
              </div>
            </div>
            <div>
              <span class="coach-tip">教龄：{{ item.drivingYears }}年</span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CSSProperties } from 'vue'

const props = defineProps({
  contentData: {
    type: Object,
    default() {
      return {}
    }
  },
  isActiveClass: {
    type: String
  }
})

const layoutClass = computed(() => {
  const layout = props.contentData.layout || 'list'
  return {
    'layout-list': layout === 'list',
    'layout-2': layout === 'grid-2',
    'layout-3': layout === 'grid-3',
    'layout-1': layout === 'grid-1'
  }
})

const defaultStyle = computed(() => {
  const s = props.contentData.style
  return {
    paddingTop: s.paddingTop,
    paddingLeft: s.paddingLeft,
    paddingRight: s.paddingRight,
    paddingBottom: s.paddingBottom
  }
})

const contentStyle = computed(() => {
  const s = props.contentData.style
  return {
    borderRadius: s.borderRadius,
    backgroundColor: s.backgroundColor,
    overflow: 'hidden'
  }
})

const priceStyle = computed(() => {
  const s = props.contentData.itemStyle
  return {
    color: props.contentData.itemStyle?.price?.color || '#FF3C29'
  }
})

// 标题样式
const titleStyle = computed(() => {
  const t = props.contentData.itemStyle?.title || {}
  const txtEllipsis: CSSProperties = {}
  if (props.contentData.show_item_name == 1) {
    Object.assign(txtEllipsis, {
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis'
    })
    if (props.contentData.layout == 'list') {
      txtEllipsis.width = '200px'
    } else if (props.contentData.layout == 'grid-2') {
      txtEllipsis.width = '160px'
    } else if (props.contentData.layout == 'grid-3') {
      txtEllipsis.width = '100px'
    } else if (props.contentData.layout == 'grid-1') {
      txtEllipsis.width = '350px'
    }
  } else if (props.contentData.show_item_name == 2) {
    Object.assign(txtEllipsis, {
      display: '-webkit-box',
      overflow: 'hidden',
      WebkitBoxOrient: 'vertical',
      WebkitLineClamp: 2
    })
  }
  return {
    fontSize: t.fontSize ? `${t.fontSize}px` : '14px',
    color: t.color || '#333333',
    fontWeight: t.fontWeight === 0 ? 'normal' : t.fontWeight,
    ...txtEllipsis
  }
})

const descStyle = computed(() => {
  const d = props.contentData.itemStyle?.desc || {}
  const txtEllipsis: CSSProperties = {}

  if (props.contentData.show_item_desc === 1) {
    Object.assign(txtEllipsis, {
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis'
    })
    if (props.contentData.layout === 'list') {
      txtEllipsis.width = '200px'
    } else if (props.contentData.layout === 'grid-2') {
      txtEllipsis.width = '160px'
    } else if (props.contentData.layout === 'grid-3') {
      txtEllipsis.width = '100px'
    } else if (props.contentData.layout === 'grid-1') {
      txtEllipsis.width = '350px'
    }
  } else if (props.contentData.show_item_desc === 2) {
    Object.assign(txtEllipsis, {
      display: '-webkit-box',
      overflow: 'hidden',
      WebkitBoxOrient: 'vertical',
      WebkitLineClamp: 2
    })
  }

  return {
    color: d.color || '#999999',
    ...txtEllipsis
  }
})
</script>

<style scoped lang="scss">
.goods-list-container {
  //padding: 10px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .goods-title {
    font-weight: bold;
    margin-bottom: 10px;
  }

  .goods-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    .goods-item {
      background: #fff;
      overflow: hidden;
      padding: 8px;
      display: flex;
      box-sizing: border-box;

      .goods-image {
        position: relative;

        .thumb {
          width: 100px;
          height: 100px;
          border-radius: 8px;
          object-fit: cover;
          display: block;
        }

        .tag-group {
          position: absolute;
          top: 4px;
          left: 4px;
          display: flex;
          flex-direction: column;
          gap: 2px;

          .tag {
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-size: 10px;
            padding: 2px 4px;
            border-radius: 3px;
          }

          .vip {
            background: #e74c3c;
          }
        }
      }

      .goods-content {
        display: flex;
        flex-direction: column;
        //justify-content: space-between;
        flex: 1;
        margin-left: 10px;

        .title {
          font-weight: bold;
          color: #333;
          margin-bottom: 4px;
        }

        .desc {
          font-size: 12px;
          color: #999;
          margin-bottom: 30px;
        }

        .price {
          font-size: 16px;
          color: #ff3c29;
          font-weight: 600;

          display: flex;
          justify-content: space-between;
          align-items: center;

          .unit {
            font-size: 12px;
          }
        }
      }
    }
  }

  .layout-1 .goods-item {
    width: 100%;
    flex-direction: column;

    .goods-image .thumb {
      width: 100%;
      height: 200px;
    }

    .goods-content {
      margin-top: 8px;
      margin-left: 0;
    }
  }

  .layout-list .goods-item {
    width: 100%;
    flex-direction: row;

    .goods-image .thumb {
      width: 120px;
      height: 80px;
    }

    .goods-content {
      margin-left: 10px;
      margin-top: 0;
    }
  }

  .layout-2 .goods-item {
    width: calc((100% - 12px) / 2);
    flex-direction: column;

    .goods-image .thumb {
      width: 100%;
      height: 100px;
    }

    .goods-content {
      margin: 6px 0 0 0;
    }
  }

  .layout-3 .goods-item {
    width: calc((100% - 24px) / 3);
    flex-direction: column;

    .goods-image .thumb {
      width: 100%;
      height: 100px;
    }

    .goods-content {
      margin: 6px 0 0 0;
    }
  }
}

.coach-phone {
  background-color: #eff8ec;
  color: #60c041;
  border-radius: 16px;
  padding: 6px;
  font-size: 12px;
  line-height: 1;
}

.coach-tip {
  color: #9e9e9e;
  font-size: 12px;
}

.sex-man {
  color: #3f89f4;
  background-color: #ebf3fd;
  width: 45px;
  height: 24px;
  border-radius: 6px;
  font-size: 12px;
  margin-right: 6px;

  .icon {
    width: 14px;
    height: 14px;
    margin-right: 4rpx;
  }
}

.sex-woman {
  color: #f284a3;
  background-color: #fef3f6;
  width: 45px;
  height: 24px;
  border-radius: 6px;
  font-size: 12px;
  margin-right: 6px;

  .icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
}

.mgB-10 {
  margin-bottom: 5px;
}

.flex {
  display: flex;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.align-center {
  align-items: center;
}

.active-component {
  border: 1px solid var(--el-color-primary);
}
</style>
